<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-aside style="width: 200px; background-color: #303133">
        <span>BUCTCODER</span>
        <el-menu
            background-color="#303133"
            text-color="#fff"
            active-text-color="#fffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <router-link to="/personal">学生个人信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <router-link to="/home">所有学生信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <router-link to="/recent1">近期比赛统计</router-link>
            </template>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <router-link to="/atcoder">各类排行榜单</router-link>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header height="50px">
          <el-row>
            <el-col :span="23">
              <span>BUCTCODER</span>
            </el-col>
            <el-dropdown>
              <i class="el-icon-s-custom" style="margin-right: 10px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/">退出</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-header>

        <el-main>
          <div style="color: #409EFF">
            <i class="el-icon-document"></i>
            <span>参加该比赛的学生</span>
          </div>
          <el-table
              :data="accontestTableData"
              border
              fit
              highlight-current-row
              style="width: 100%"
              ref="editTable"
          >
            <el-table-column prop="stuid" label="学号">
              <template slot-scope="scope">
                <router-link :to="{path:'/student1',query:{id:scope.row.stuid}}">{{scope.row.stuid}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="stuname" label="姓名">
            </el-table-column>
            <el-table-column prop="acid" label="atcoder账号">
            </el-table-column>
            <el-table-column prop="acchange" label="积分变化">
            </el-table-column>
            <el-table-column prop="acscore" label="最新积分">
            </el-table-column>
            <el-table-column prop="acrank" label="排名">
            </el-table-column>
            <el-table-column prop="performance" label="表现">
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="prev, pager, next,  sizes, total, jumper"
              :total="total"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "accontest1",
  data() {
    return {
      accontestTableData: [],
      pageNum: 1,//当前加载的page
      pageSize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val; //val可以获取当前用户选择的页码数
      this.loadData();//页面加载触发的查询所有的事件
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pageSize = val;//获取用户想要每页显示的条数
      this.loadData();
    },
    loadData() {
      //请求后台接口获取数据
      this.$axios
          .post('/atcoder/querystudentbycontestname', {
            accontestname: this.$route.query.id,
            pageSize:this.pageSize,
            pageNum:this.pageNum
          }).then(response=>{
        this.accontestTableData = response.data.data.list;
        this.total=response.data.data.total;
      })
    }
  }
}
</script>